<div class="page-wrapper d-flex flex-column pt-4">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Page's Posts
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card">

                    <div class="btn-toolbar d-flex card-body" role="group" aria-label="">
                        <div class="btn-group me-2">
                            <button type="button" ng-click="back()" class="btn btn-light me-1">
                                <i class="fa fa-chevron-left"></i>
                            </button>
                        </div>
                        <div class="btn-group flex-fill me-3">
                            <button type="button" class="btn btn-primary  ms-auto" data-bs-toggle="modal"
                                data-bs-target="#modal-nav-posts-{{pageId}}">
                                <i class="fas fa-search"></i> Link posts
                            </button>
                        </div>
                        <div class="btn-group me-2">
                            <div class="dropdown float-lg-end ms-auto pe-1">
                                <a href="javascript:;" class="cursor-pointer" id="dropdownTable2"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-ellipsis-h text-secondary" aria-hidden="true"></i>
                                </a>
                                <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable2"
                                    style="">
                                    <li>
                                        <a href="{{createUrl}}" class="dropdown-item border-radius-md">
                                            <i class="fas fa-plus"></i> Create new post
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/portal/page/details/{{pageId}}"
                                            class="dropdown-item border-radius-md">
                                            <i class="fa fa-list-alt"></i> Page details
                                        </a>
                                    </li>
                                    <li><button type="button" ng-click="$ctrl.clearCache()" ng-if="$ctrl.onClearCache"
                                            class="dropdown-item border-radius-md">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                class="icon icon-tabler icon-tabler-refresh" width="20" height="20"
                                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                                stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
                                                <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
                                            </svg>
                                            <span>Clear Cache</span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">
            <!-- <section class="content container-fluid"> -->
            <div class="row">
                <modal-nav-posts save="saveOthers()" src-column="'pageId'" src-id="pageId" selected="others">
                </modal-nav-posts>
            </div>
            <div class="card" ng-init="init()">
                <div class="card-body">
                    <table id="list-page" class="table table-hover sortable" cellspacing="0" ng-init="getList()">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" class="col">
                                    <!-- <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small> -->
                                </th>
                                <!-- <th scope="col" class="col">
                                </th> -->
                                <th scope="col" class="col">Title</th>
                                <th scope="col" class="col">Image</th>
                                <th scope="col" class="col">Created Date</th>
                                <th scope="col" class="col">Author</th>

                                <th scope="col" class="col"></th>
                            </tr>
                        </thead>

                        <tbody class="sortable" dnd-list="data.items" dnd-disable-if="!canDrag">
                            <!-- <tr ng-if="canDrag">
                    <td colspan="7"><small class="text-warning"
                            ng-bind="translate('warning_can_not_drag_drop',true, '(Drag & Drop feature only active when priority is asc)')"></small>
                    </td>
                </tr> -->
                            <tr ng-repeat="item in data.items" dnd-draggable="item" dnd-effect-allowed="move"
                                dnd-selected="selected = item" dnd-moved="updateInfos($index)"
                                ng-class="{'selected': selected === item}">
                                <td style="cursor: grab" class="drag-header small">
                                    <!-- <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small> -->
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="icon icon-tabler icon-tabler-drag-drop-2" width="20" height="20"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <rect x="8" y="8" width="12" height="12" rx="2" />
                                        <line x1="4" y1="4" x2="4" y2="4.01" />
                                        <line x1="8" y1="4" x2="8" y2="4.01" />
                                        <line x1="12" y1="4" x2="12" y2="4.01" />
                                        <line x1="16" y1="4" x2="16" y2="4.01" />
                                        <line x1="4" y1="8" x2="4" y2="8.01" />
                                        <line x1="4" y1="12" x2="4" y2="12.01" />
                                        <line x1="4" y1="16" x2="4" y2="16.01" />
                                    </svg>
                                </td>
                                <!-- <td>
                                    <input type="text" value="{{item.priority}}"
                                        class="item-priority form-control form-control-sm d-inline"
                                        style="width: 40px" />
                                </td> -->
                                <td>
                                    <span ng-bind-html="item.post.title"></span>
                                </td>
                                <td>
                                    <div ng-if="item.post.image!=''">
                                        <preview-image img-height="30" img-src="item.post.imageUrl"></preview-image>
                                    </div>
                                </td>
                                <td class="small">
                                    {{item.post.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
                                </td>
                                <!-- BUG: not showing Author -->
                                <td class="small">{{item.post.createdBy}}</td>

                                <td>
                                    <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                        aria-label="Actions">
                                        <a ng-click="goToPath(updateUrl + '/' + item.post.id)"
                                            class="btn btn-link text-primary">
                                            <span class="fas fa-pen"></span>
                                        </a>
                                        <a ng-click="preview(item.post)" target="_blank"
                                            class="btn btn-link text-primary">
                                            <span class="fas fa-eye"></span>
                                        </a>

                                        <a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                            <span class="fas fa-trash-alt"></span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <!-- ngIf: canDrag --><small ng-if="!canDrag" class="text-info ng-binding ng-scope"
                                ng-bind="translate('warning_can_not_drag_drop',true, 'Note: Drag Drop only allow when order by priority asc')">Note:
                                Drag Drop only allow when order by priority asc</small>
                            <!-- end ngIf: canDrag -->
                        </div>
                        <div class="col-6">
                            <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                                ul-class="pagination justify-content-end m-0" a-class="page-link"
                                paging-action="getList(page-1)" scroll-top="true"></paging>
                        </div>
                    </div>
                </div>

                <!-- </section> -->
            </div>
        </div>

    </div>
</div>